Lorsqu'on fait une illustration il faut penser à quel type d'illustration on veut créer avant de se lancer. Est ce que ça nécessite vraiment du dessin ? %Zsolt's Personal Visual Knowledge Management

Installation

Pour personnaliser les tags que va creer excalidraw a chaque fois il suffit de créer le bon template en copiant collant ce qu'il fait de base et en rajoutant les infos. Ensuite on indique le chemin du template et voila.
Le template de base est Template.excalidraw. et mon template est Template.excalidraw2

Le dossier template vous permet ainsi de pré paramétré votre espace de travail excalidraw Comme par exemple :
Quels outils sont disponibles
Quelle police vous utilisez
Est qu'il y a des formes préchargée ?

Pour créer un template il suffit de placer le fichier excalidraw dans le dossier template de excalidraw

Commandes les plus utiles

Insertion

• Clic droit insérer un lien :
  • si rien est selectionné ça nous met le texte du lien avec un lien vers la note
  • si un objet est selectionné ça lie un lien à l'objet
• Click droit : convert to markdown file
  • permet de convertir une partie texte d'un excalidraw son propre fichier. On a plus à se soucier de ce qu'on veut creer au départ, on peut juste se laisser porter par sa créativitée.
    NB : on peut pas encore convertir une partie d'un dessin en son propre excalidraw
• Il reconnait si on à déjà un fichier dans le coffre et fera un lien vers excalidraw plutot que d'importer le fichier en double (par exemple si on drag and drop une image)
  • Pour les images il faudra utiliser le script Deconstruct selected element as a image
• Retirer une image du schmé ET du coffre : CTRL + P : delete...

Dessin

• Alignement automatique en déplaçant un element et en restant appuyé sur controle (équivaut à activer l'option "aimanter aux objet" en faisant clic droit)
  • Effet inverse si la grille est activée (clic droit -> activer la grille)
• Faire une ligne simple : rester appuyé lorsqu'on trace la ligne
• Faire une ligne qui a une forme bien particulière : faire de court clic dès qu'on veut la faire changer de direction

Remaniement image

• quand on joue avec les dimension d'un embed, cela permet juste d'en voir plus. Mais si on maintient SHIFT enfoncé, la on va pouvoir augmenter la taille de l'embed dans l'excalidraw
• Changer la couleur d'une image (UNIQUEMENT SVG !!!!!! (vecteur))
  • selectionner le color picker et identifier le nom de la couleur qu'on veut changer
  • ouvrir la vue en markdown
  • à coté de l'image inscrire :
  • Et voila

Rognage

CTRL + P : cropping
Ca va créer une deuxième image appelée (cropped + nom de l'image). Un peu chiant pour le bruit dans le coffre

Dans cet onglet rognage on peut en plus faire des masques ! Les formes qu'on dessine en noir sur l'image masquent, le blanc rend visible.

De cette façon on peut ajouter des métadonnées aux images à partir du moment ou ont les ajoutent en blanc !!!

Détails de tout ca en video

Annoter ses images

Il y a aussi une fonction annotations.
Il suffit de faire clic droit sur l'image puis annote image

Ça va remplacer l'image dans la note par un excalidraw qui va intégrer l'image (depuis sa localisation dans le coffre)
On pourra ensuite annoter l'image

Voir vidéo

Text manipulation

• TExt aura : met une ombre dans la couleur complémentaire du texte sauf si on a le nom d'une couleur dans le presspapier et dans ce cas l'ombre sera de cette couleur

Paramétrage

• Sur un schéma clicker les 3 barres en bas à gauche puis sur "toggle tray mode" pour avoir les icones de script qui s'affichent sur la droite et non en haut
• Explication des parametre dans Apparence -> clic et drag and drop
  
• Créer des catégories pour classer ses scripts : Dans le dossiers ous sont rangés les scripts excalidraw, faire des sous dossiers ou on range les scripts. Le nom des dossier sera le nom des catégories. Bouger ensuite les scripts (svg et md) dans les dossiers associés
• Si on reste appuyé longtemps en clic gauche sur un script il se met dans notre barre de droite.
• Avoir une police locale particulière :
  • Aller dans les paramètre "Non excalidraw.com"
  • Drag and droper une police dans votre coffre (dans le dossier extra)
  • Activer et choisir la police. De base c'est virgile. ATtention, on ne peux choisir qu'une seule police locale qu'on pourra utiliser en plus de la police de base
• Avoir plusieurs pinceaux
  • Aller dans les paramètre "Non excalidraw.com"
  • Choisir son nombre de crayon
  • Aller sur son excalidraw et double cliquer sur l'icone du crayon dans la barre de droite pour le modifier
  • Y en a 10 mais de base seulement 7 sont paramétrer différemment et seulement 5 son intéressant à mon avis

Du markdowns au dessin et vise versa

"Au dos" (open as markdown) d'un dessin excalidraw, on peut accéder à une page markdown

Mais l'inverse est désormais possible !
On peut maintenant utiliser une note markdown pour dessiner au dos un schéma ! Utile pour schématiser des notions complexes !
CTRL + P : convert markdown note to excalidraw drawing

Si on veut aller en arrière
CTRL + P : toggle between excalidraw and markdown mode

Pour faire en sorte que la page s'ouvre direct au format markdown plutôt que excalidraw on peut mettre la YAML : excalidraw-open-md : true

Video qui explique cette fonctionnalité

Script

Une overview de la plupart des scripts utiles

Dessin

• convert freedraw to line : permet de mettre pas mal de point d'inflexion sur une ligne tracé à la main pour la modifier et etre précis
• boolean : Fusionner des formes entre elles en effaçant les contours aux point d'intersections
• set stroke width : modifie l'épaisseur des lignes

Mettre de l'ordre

• Mindmap format : trouve la meilleure dispo pour votre mindmap
• Auto layout : c'est vous qui choisissez la dispo et il vous l'ordonne propre. Les options sont un peu obscure (logiciel ELK)
• Grid select : met les objet selectionnés en grille

Gagner du temps

• OCR (Taskbone Optical Character recognition): reconnaitre du texte manuscrit ou sur une photo et le mettre en texte tapé dans le presse papier. ATTENTION il va traduire tout l'excalidraw et c'est un CTRL + P -> OCR. La transcription est ensuite ajoutée automatiquement dans les métadonnées

Slideshow

Tuto de %Zsolt's Personal Visual Knowledge Management

Utiliser le laser (raccourcis K) pour présenter. On peut s'aider de la Remarkable qui rend la présentation plus sympa

CTRL + P -> toggle frame rendering : permet de rendre visible les frames si elles disparaissent

Méthode de la flèche

• On détermine une diapo sur l'espace qu'il y a entre les deux points d'une flêche
• On lance le diapo en appuyant sur le script
• on peut cacher la fleche meme hors slideshow en cochant une case. On ne pourra voir la fleche qu'en relançant le slideshow et en décochant la case

Méthode de la frame

• On trace en maintenant F enfoncé (outil cadre)
• Le nom des frames détermine leur ordre
• On ne peut pas cacher les frames comme les fleches
• Petit bémol : quand on met une frame, si on bouge la frame ça bouge tous les élèment du cadre. Pas moyen de selectionner facliement les éléments dans le cadre à part avec un clic droit -> selectionner les élèments du cadre

EscaliAI

• Télécharger le script

• Rentrer son API chatgpt

• Utilise ChatGPT 4 pour générer une prompt puis utilise Dall-E pour générer l'image

• Coute 0,05 centime par génération d'image

Creer une image a partir d'un croquis

• Sélectionner le croquis
• Cliquer sur le script
• sélectionner "generate image from image and prompt"
• Taper sa prompt pour influencer le résulat final
• Enregistrer en local par clic droit le résultat final s'il nous plait

Modifier une image

• Mettre des rectangle gris ou noir sur les zone de l'image qu'on veut modifier
• Selectionner l'image et les rectangles
• cliquer sur le script
• selectionner edit image
• ecrire dans la prompt ce qu'on veut rajouter à la place des rectangles
• Enregistrer en local par clic droit le résultat final s'il nous plait

Créer des icones

• On prompt juste l'icone qu'on veut et L'ai nous le génère en excalidraw (donc modifiable)
• Je pense qu'il faut enregistrer en local le résultat final

Illustrer un brain storm visuel

• Si on fait un brainstorm visuel (mindmap + illustration) on peut faire une image qui résume le tout.
• Il faut selectionner tous les élèment avant de lancer le script

Scribble helper

Le but est de pouvoir prendre des notes manuscrite facilement et donc de passer :

• d'une ecriture manuscrite à tapée instantanément
• ramanier ce texte tapé facilement

Utilisation :

• Activer le script
• Double tapper pour ouvrir scribble helper

Export/imbrication

• embed scene : On peut exporter des images hors du coffre mais faire en sorte que si on les réimporte, l'image ait une mémoires des élèments qui étaient séparés entre eux avant l'export pour reprendre les choses ou on en était

Rendre le fond transparent si il y a une couleur

• Ouvrir l'excalidraw en markdown
• rajouter dans les métadonnées
  • excalidraw-export-transparent: true
• L'excalidraw apparaitra sur fond transparent dans tous les fichiers ou il est utilisé

Inverser les couleurs

• Personalisation
• Switch in dark mode
• L'excalidraw apparaitra en mode dark partout ou il est imbriqué.
• Il existe un script qui adapte automatiquement l'excalidraw au fond

Intégrer ses excalidraw à canvas

Nécessite canvas candy (thème css payant 20 balles)

Enlever les bordures

• Ouvrir l'excalidraw en markdown
• rajouter dans les métadonnées
  • ccsclasses:
    • cc-border-none

Workflow

• Remarkable en tablette graphic
• Avec un Ipad ça a l'air incroyable aussi

Amélioration possible

• Voir le pluggin AidenLx's folder note permet de gérer l'importation de ses image de %Zsolt's Personal Visual Knowledge Managementen revoyant sa video globale (j'ai vu et apparement c'est simplement pour mettre des smiley dans les dossier et rajouter des métadonnées dedans). Ca permet aussi de créer une note de dossier (intéressant pour mes super mooc).

Option pas forcément utiles

Script Nombre d'or (pas indispensable)

• Permet de créer des patrons de nombres d'or dans des rectangles pour mieux réaliser nos illustration car il a été prouvé que le nombre d'or régit les oeuvre de bon gout
• Cela permet aussi de trouver la taille de police idéale.
  • Si on selectionne un texte et qu'on appuie sur le script, il nous propose 3 tailles différentes qui respectent le nombre d'or
  • Si on attends 2 secondes, il nous proposera des polices supérieures

Importation

• On peut drag and droper depuis le web.
  • Si on veut importer autre chose qu'une image, importer avec CTRL+SHift enfoncer
  • Mais bon ça ça risque de polluer à fond notre coffre
• Meme en local si ce n'est pas une image il va falloir utiliser CTRL+SHIFT

Référence

Liens

Mermaids

Métadonnées

MOC ::
Source ::
Projet ::
Tags :: #Note/ressource📚 #EXTRA/plugin🔌
Date :: 19-09-2023
Note N° 20230919141919